<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${dataItem.MachineName ? dataItem.MachineName : '无'}-锭子断头详情`"
		width="900px"
		append-to-body
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div ref="box1" class="margin-bottom-4" style="font-size: 13px;">
			<div class="flex-start-center margin-bottom-10">
				<!--<jk-select v-model="searchParams.selectType" :option-list="selectTypeList" class="item-gap search-bar-item-size1" size="medium" @change="onSelectTypeChange"></jk-select>-->
				<jk-select v-model="searchParams.selectTime" :option-list="timeTypeList" :clearable="false" size="mini" class="item-gap search-bar-item-size1" @change="onSelectTimeTypeChange"></jk-select>
				<jk-date-picker v-show="searchParams.selectTime === 6" v-model="dateTimeRange" type="datetimerange" size="mini" class="item-gap" @change="getDtListRequest"></jk-date-picker>
			</div>
			<div class="flex-start-center">
				<div class="flex-start-center margin-right-10">
					<span>锭子状态:</span>
					<el-radio-group v-model="searchParams.dateValue" size="mini" @change="onModifySearchParamChange">
						<el-radio-button
							v-for="(item) in statusList"
							:key="item.id"
							:label="item.id"
						>{{ item.name }}</el-radio-button>
					</el-radio-group>
				</div>
				<div class="flex-start-center">
					<span>断头类型:</span>
					<el-radio-group v-model="searchParams.bCode" size="mini" @change="onModifySearchParamChange">
						<el-radio-button
							v-for="(item) in bCodeList"
							:key="item.id"
							:label="item.id"
						>{{ item.name }}</el-radio-button>
					</el-radio-group>
				</div>
			</div>
		</div>
		<jk-table :data="tableData" :loading="tableLoading" :height="dialogTableHeight - 20">
			<vxe-column
				v-for="(item, index) in tableColumnList"
				:key="index"
				:title="item.title"
				:align="item.align"
				:field="item.keyName"
				:sortable="item.sortable"
				:fixed="item.fixed ? item.fixed : ''"
				:min-width="item.minWidth"
				:width="item.width"
			>
				<template slot-scope="scope">
					<span v-if="item.keyName === 'ifTest'">{{ scope.row.ifTest ? '试产打样' : '正式生产' }}</span>
					<div v-else-if="item.keyName === 'Bcode'">{{ transferData(bCodeList, scope.row.Bcode) }}</div>
					<div v-else-if="item.keyName === 'DataValue'">{{ transferData(statusList, scope.row.DataValue) }}</div>
					<span v-else>{{ scope.row[item.keyName] }}</span>
				</template>
			</vxe-column>
		</jk-table>
		<footer ref="box2" class="flex-end-center margin-top-10">
			<jk-page
				:page-index="searchParams.pageNo"
				:page-sizes="searchParams.pageSizes"
				:page-size="searchParams.pageSize"
				:total="totalCount"
				layout="total, prev, pager, next"
				@on-change="onPageChange"
			/>
		</footer>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { systemUserColumnConfigGet } from '../../../../api/system/column-config';
    import { spinReportGetPageBreaksBySpindle } from '../../../../api/production/xsReport';
    import mx from './mx';
    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            ifTest: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            stateList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        mixins: [calHeight, mx],
        data() {
            return {
                tableData: [],
                tableColumnList: [],
                showDialog: false
            };
        },
        methods: {
            getMenuColumnListRequest() {
                return systemUserColumnConfigGet({ path: 'MachineBrokenEnd', filterShow: true }).then(res => {
                    if (res.data.status === 200) {
                        this.tableColumnList = res.data.res ? res.data.res.columnConfigList.find(x => x.code === 'dzdt').itemList : [];
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getData() {
                this.getDataRequest();
            },
            getDataRequest() {
                this.tableLoading = true;
                return spinReportGetPageBreaksBySpindle({
                    pageNo: this.searchParams.pageNo,
                    pageSize: this.searchParams.pageSize,
                    dateValue: this.searchParams.dateValue,
                    bCode: this.searchParams.bCode,
                    machineId: this.searchParams.machineId,
                    startDateTime: this.searchParams.startDateTime,
                    endDateTime: this.searchParams.endDateTime,
                    ifTest: this.searchParams.ifTest
                }).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.totalCount = res.data.count;
                    }
                });
            }
        },
        watch: {
            dialogState(newVal) {
                if (newVal) {
                    this.searchParams.machineId = this.dataItem.IDMachine;
                    this.getMenuColumnListRequest();
                    this.getDtListRequest();
                }
                this.showDialog = newVal;
            }
        }
    };
</script>
